<template>
    <el-dialog title="计费通知" :visible.sync="dialogTableVisible" custom-class="pay-dialog">
        <div class="top" style="display: flex">
            <el-input v-model="username" placeholder="请输入用户账号" style="width: 50%"></el-input>
            <el-button type="primary" icon="el-icon-search" @click="search" style="margin-left: 15px;width: 6%"></el-button>
            <el-button type="success" icon="el-icon-refresh-right" @click="reset" style="margin-left: 12px;width: 9%;background: rgb(247, 186, 42);border-color: rgb(247, 186, 42)">重置</el-button>
        </div>

        <div class="list" style="margin-top: 10px">
            <el-table
                    ref="multipleTable"
                    :data="tableData"
                    border
                    align="center"
                    tooltip-effect="dark"
                    style="width: 100%;font-size: 14px;color: #1f2d3d;margin: auto;cursor: pointer"
                    v-loading="loading"
                    highlight-current-row
                    @current-change="handleSelectChange">
                <el-table-column
                        type="index"
                        label="序号"
                        align="center"
                        width="65">
                </el-table-column>
                <el-table-column
                        prop="username"
                        label="用户账号"
                        align="center"
                        min-width="12%">
                </el-table-column>
                <el-table-column
                        prop="homeaddress"
                        label="家庭住址"
                        show-overflow-tooltip
                        min-width="15%"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="type"
                        label="类型"
                        min-width="10%"
                        :formatter="typeFormatter"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="coststatus"
                        label="缴费状态"
                        show-overflow-tooltip
                        :formatter="statusFormatter"
                        min-width="10%"
                        align="center">
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination @current-change="handleCurrentChange"
                               layout="total, sizes,prev, pager, next, jumper"
                               :current-page.sync="iPagination.current"
                               :page-size='iPagination.pageSize'
                               :page-sizes="iPagination.pageSizeOptions"
                               :total="iPagination.total"
                               @size-change="handleSizeChange">
                </el-pagination>
            </div>
        </div>
        <span slot="footer"
              class="dialog-footer" style="float: right">
            <el-button type="primary"
                       class="full-width"
                       @click="close">取消</el-button>
            <el-button type="primary"
                       class="full-width"
                       @click="notice">通知</el-button>
        </span>
    </el-dialog>
</template>

<script>
    export default {
        name: "payDialog",
        data(){
            return{
                username:'',
                tableData: [],
                dialogTableVisible: false,
                formData:{},
                table: false,
                loading: false,
                iPagination: {
                    current: 1,
                    pageSize: 7,
                    pageSizeOptions: [7, 10, 20, 30],
                    total: 0,
                    "page": 0,
                    "pageSize": 7,
                },
                multipleSelection: []
            }
        },
        created(){
          this.getData()
        },
        methods:{
            init(row){
              this.formData = row
            },
            // 分页
            handleCurrentChange (val) {
                this.iPagination.current = val;
                this.getData()
            },
            handleSizeChange (val) {
                this.iPagination.current = 1;
                this.iPagination.pageSize = val;
                this.getData()
            },
            getData(){
                this.loading = true;
                this.$Axios({
                    url: '/users/getUserList',
                    method: 'get',
                    data:{
                        username: this.username,
                        currPage: this.iPagination.current - 1,
                        pageNum: this.iPagination.pageSize,
                    },
                    success:(result)=>{
                        this.tableData = result.data;
                        this.iPagination.total = result.total;
                        setTimeout(() => {
                            this.loading = false;
                        }, 200);
                    }
                })
            },
            // 查询
            search(){
                this.iPagination.current = 1;
                this.getData()
            },
            reset(){
              this.username = '';
              this.search()
            },
            // 选择按钮
            handleSelectChange(val) {
                this.multipleSelection = val;
                console.log(this.multipleSelection, 222)
            },

            // 通知
            notice(){
                this.$confirm('确定通知改用用户缴费?','提示',{
                    type: 'warning'
                }).then(()=>{
                    this.$axiosToken({
                        url: '/cost/updateCostData',
                        method: 'post',
                        data:{
                            u_id: this.multipleSelection.id,
                            c_id: this.formData.id,
                            coststatus: this.formData.coststatus,
                            paystatus: 1,
                            username: this.multipleSelection.username,
                        },
                        success: (result)=>{
                            this.$message({
                                message: '通知成功',
                                type: 'success',
                                duration: 2000
                            });
                            this.dialogTableVisible = false;
                            this.$parent.getCostData();
                        }
                    });
                });
            },






            // 取消
            close(){
                this.dialogTableVisible = false
            },
            // 类型转中文
            typeFormatter(row,column){
                const type = row.type
                if (type == 1){
                    return '管理员'
                }else {
                    return '普通用户'
                }
            },
            statusFormatter(row,column){
                const coststatus = row.coststatus
                if (coststatus == 1){
                    return '已缴费'
                }else if ((coststatus == 2)) {
                    return '未缴费'
                }
            }
        },
    }
</script>

<style scoped>
    .block{
        float: right;
        margin-top: 20px;
    }
    /deep/.el-dialog__title{
        font-size: 20px;
        color: #303133;
        font-weight: bolder
    }
    /deep/ .el-input.el-input--mini.el-input--suffix>.el-input__inner{
        height: 28px;
    }
    .el-button{
        width: 60px;
        height: 36px;
        font-size: 14px;
    }
    /deep/.el-drawer__header>:first-child {
        flex: 1;
        font-weight: bold;
        color: black;
        font-size: 20px;
    }
    /deep/.pay-dialog{
        width: 900px;
        margin: auto;
        overflow: auto;
    }
    /deep/.el-dialog__body {
        padding: 10px 20px;
        color: #606266;
        font-size: 14px;
        word-break: break-all;
    }
    /deep/.el-dialog__footer {
        padding: 55px 25px 17px;
        text-align: right;
        box-sizing: border-box;
        padding-bottom: 50px;
    }
    .full-width{
        width: 80px;
        margin-left: 15px;
    }
</style>